<template>
  <div class="dialog">
    <el-dialog
      title="登录"
      :visible.sync="showMask"
      :before-close="closeMask"
      custom-class="login-dialog"
      :close-on-click-modal="false"
    >
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            placeholder="请输入企业账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model.number="loginForm.phone" placeholder="请输入手机号">
            <template slot="prepend"
              >+86<span class="dialog-line">|</span></template
            >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入验证码">
            <template slot="append">
              <span class="dialog-line">|</span
              ><img
                :src="data.codeUrl"
                alt=""
                style="width: 107px; height: 25px"
              />
            </template>
          </el-input>
        </el-form-item>
        <el-button
          type="primary"
          @click="toLogin('loginForm')"
          :class="pass ? 'loginForm' : ''"
          >登录</el-button
        >
        <a
          href="http://www.rcsdev.juphoon.com/#/register"
          class="sign-btn"
          target="_blank"
          >免费注册</a
        >
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
var _this;
export default {
  props: ["showMask", "data"],
  data() {
    return {
      loginForm: {
        account: "",
        phone: "",
        password: "",
        code: "",
        uuid: "",
      },
      pass: false,
      rules: {
        account: [
          { required: true, message: "请输入企业账号", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  created() {
    _this = this;
  },
  methods: {
    toLogin(formName) {
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(_this.loginForm)
          _this.$emit("loginForm", _this.loginForm);
        } else {
          return false;
        }
      });
    },
    closeMask() {
      _this.$emit("close");
    },
  },
  mounted() {},
  watch: {
    loginForm: {
      //监听的对象
      deep: true, //深度监听设置为 true
      handler: function (n) {
        if (n.account && n.phone && n.password && n.code) {
          _this.pass = true;
        } else {
          _this.pass = false;
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
.dialog-line {
  color: #dcdfe6;
  padding: 0 10px;
}
.sign-btn {
  display: block;
  height: 22px;
  line-height: 22px;
  text-align: right;
  color: #3f94ff;
  font-size: 16px;
  margin-top: 20px;
}
</style>
<style>
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input-group__prepend,
.el-form-item.is-error .el-input-group__append {
  border-color: #f56c6c;
}
.login-dialog {
  margin: 0 auto !important;
  width: 582px !important;
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 46px 110px 29px 111px;
  box-shadow: 0px 0px 7px 0px #dfe1e7;
  border-radius: 8px;
}
.login-dialog .el-dialog__header {
  padding: 0;
  height: 40px;
  line-height: 40px;
  margin-bottom: 40px;
}
.login-dialog .el-dialog__title {
  color: #303133;
  font-size: 28px;
  position: relative;
}
.login-dialog .el-dialog__title::after {
  content: "";
  width: 55px;
  height: 5px;
  background: #3f94ff;
  border-radius: 4px;
  position: absolute;
  left: 0;
  top: 37px;
}
.login-dialog .el-dialog__headerbtn {
  line-height: normal;
  outline: 0;
}
.login-dialog .el-dialog__body {
  padding: 0;
}
.login-dialog .el-form-item {
  margin-bottom: 35px;
}
.login-dialog .el-form-item .el-form-item__content {
  margin-left: 0 !important;
  line-height: 36px;
}
.login-dialog .el-input__inner {
  padding: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid #dcdfe6;
  height: 36px;
  line-height: 36px;
}
.login-dialog .el-input__inner::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #848895;
}
.login-dialog .el-input__inner:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #848895;
}
.login-dialog .el-input__inner::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #848895;
}
.login-dialog .el-input__inner:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #848895;
}
.login-dialog .el-input-group__prepend {
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid #dcdfe6;
  color: #848895;
}
.login-dialog .el-input-group__append {
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid #dcdfe6;
}
.login-dialog .el-button--primary {
  width: 100%;
  background: #a4b0c4;
  border: 0;
  height: 40px;
  outline: 0;
}
.loginForm {
  background: #3f94ff !important;
}
</style>
<style>
input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important;
}
</style>
